<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <h3>侦听器(watcher)</h3>
        <script src="https://unpkg.com/vue@next"></script>
    </head>
    <body>

        <div id="watch-method">
            <input type="radio" v-model="maritalStatus" value="未婚">未婚
            <input type="radio" v-model="maritalStatus" value="已婚">已婚
            <input type="radio" v-model="maritalStatus" value="离婚">离婚
            <input type="radio" v-model="maritalStatus" value="丧偶">丧偶
            <hr>
            <div>{{ message }}</div>
        </div>

        <script type="text/javascript">
            const app = Vue.createApp({
                data(){
                    return {
                        maritalStatus: '未婚' ,
                        message: '欢迎未婚人士加入本站'
                    }
                },
                methods: {
                    checkState: function(){
                        switch( this.maritalStatus ) {
                            case '未婚' : 
                                this.message = '欢迎未婚人士加入本站' ;
                                break;
                            case '已婚' : 
                                this.message = '这里不太适合你' ;
                                break;
                            case '离婚' : 
                            case '丧偶' : 
                                this.message = '这里可能有适合你的人' ;
                                break;
                            default:
                                this.message = '';
                        }
                    }
                },
                watch: {
                    maritalStatus: 'checkState'
                }
            });

            const vm = app.mount( '#watch-method' );
            console.log( vm );
        </script>

        
    </body>
</html>